<template>
  <view class="flex flex-column u-m-b-10 rounded-10 box-shadow bg-white" style="width: 310rpx;" @click="toDetail">
		<u-image :src="item.logo_image" mode='aspectFit' width="310rpx" height="310rpx" borderRadius="10"></u-image>
    <view class="u-p-10">
      <view class="" style="height: 70rpx;">
        <text class="font-26 text-ellipsis-2" >{{item.store_name}}</text>
      </view>
      <view class="flex align-center u-m-y-16" style="height: 30rpx;line-height: 30rpx;">
        <view class="font-20" style="color:#ccc;">距你</view>
        <text class="u-p-l-10 u-font-24" style="color:var(--mainColor);">{{distanceFn(item.distance)}}</text>
      </view>
	  <view class="contribute text-center border rounded-10">赠送贡献值{{item.out_benefit_rate}}%!</view>
    </view>
  </view>
</template>

<script>
	export default {
		name:"dy-supplier-item",
    props:{
      item:{
        type: Object,
        default() {
          return {}
        }
      }
    },
    created(){
      console.log(this.item);
    },
    methods: {
      distanceFn(distance){
				if(distance>1){
					return Math.floor(distance) + 'km'
				}else{
					return distance + 'km'
				}
			},
      toDetail() {
        uni.navigateTo({
          url:'/pages/supplierPage/supplierIndex/supplierIndex?id=' + this.item.merch_id
        })
      }
    }
	}
</script>

<style lang="scss" scoped>
 .contribute{
	 border: 1rpx solid #fe572a;
	 color: #fe572a;
	 padding: 2rpx 0;
	 margin-bottom: 6rpx;
 }
</style>
